<template>
 <lay-layout class="Pop">
  <lay-body>
    <lay-upload ref="uploadRef" acceptMime="images" @done="done" @before="before"
                :auto="true"
                :drag="true"
                :multiple="multiple"
                :url="url"
                :field="field"
                :data="data"
                :headers="headers">
    </lay-upload>
   <div>
     {{model.fileName}}
   </div>
       
  </lay-body>

<!--  <lay-footer>     -->
<!--    <lay-button size="sm" type="primary" @click="toSubmit">保存</lay-button>-->
<!--    <lay-button size="sm" @click="toCancel" style="margin-left:40px;">取消</lay-button>-->
<!--  </lay-footer>-->
</lay-layout>

</template>

<script lang="ts">
import { ref, watch,reactive,onMounted,h } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";  
import MyWin from "../../library/MyWin"; 
import MyPage from "../../library/MyPage"; 
import {MyExcel} from "../../library/MyExcel"; 
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport"; 
import MyData from "../../library/MyData";
import MyProcess from "@/library/MyProcess";
import { useUserStore } from "../../store/user";

export default {


  setup(prop:any, context:any) {
    var  baseUrl=""
    const url=ref(MyHttp.getBaseURL()+"/htfile/up");

    const myWin=ref<any>(null);
    const model = reactive<any>({fileName:""} )
    const layFormRef = ref<any>()
    const toSubmit=async()=>{
      layFormRef.value.validate((isValidate:boolean, model:any, errors:Array<any>) => {
          if(!isValidate){
            let msg='';
            errors.forEach(element=>{ 
              msg+=`${element.message}
              `; 
            })
            
            MyWin.alert(msg,{});
            return;
          }
          save();
      });
    } 
    const toCancel=()=>{ 
      context.emit("cancel");  
      myWin.value.close();
    }
    const save=async()=>{
      let url=baseUrl+"/insert";
      if(!prop.isAdd){
        url=baseUrl+"/update";
      }
      var r=await new MyHttp().post(url,model,
        { 
        }
      ); 
      context.emit("ok",model); 
      myWin.value.close();  
    }

    const commTypeList=ref([
      {label:'TCP', value:'TCP'},
      {label:'UDP', value:'UDP'},
      {label:'HTTP', value:'HTTP' },
      {label:'MQTT', value:'MQTT' },
      {label:'WS', value:'MQTT' },
    ])


    const before=( )=>{

      MyProcess.show();
    }
    const done=(r:any)=>{
      MyProcess.hide();
      var jo=JSON.parse(r.data);
      if(jo.code!=0){
        MyWin.alert(jo.msg,{});
        return;
      }
      else{
        var msg=`上传${jo.data.name} 成功,地址:${jo.data.url}`
        MyWin.alert(msg,{})
      }

      context.emit("ok",jo.data);
    }
    const field=ref("file");
    const multiple=ref(false);
    const choose=(ev:any)=>{

    }
    const userInfoStore = useUserStore();
    const headers=ref<any>({
      token:userInfoStore.token
    })
    const data=ref<any>({

    })
  const uploadRef=ref()
    onMounted(() =>{  
      myWin.value=new MyWin();
    });
    return {
      model,
      layFormRef,
      commTypeList,
      toSubmit,
      toCancel,

      url,
      before,
      done,
      field,
      choose,
      multiple,
      data,
      headers,
      uploadRef,

    }
  }
}
</script>
<style scoped>
.Pop .layui-footer,
.Pop .layui-header {
  height: 50px;
  text-align: center; 
  padding-top: 10px;
  
}  
.Pop .layui-body{
  padding-top: 10px;
  /* justify-content:start; */
   
}
.MainForm{
  margin: 10px;
  width:100%;
   
} 
  
 
</style>